<template>
  <div class="accountsubsidycity">
    <el-form :inline="true">
      <el-form-item label="征地项目:">
        <el-select
          v-model="value"
          value-key="Id"
          placeholder="请选择"
          @change="onChange()"
        >
          <el-option
            v-for="item in options"
            :key="item.Id"
            :label="
              item.township +
              '--' +
              item.Village +
              '--' +
              item.YearNum +
              '--' +
              item.ProjectName
            "
            :value="item.Id"
          />
        </el-select>
      </el-form-item>
      <!-- <el-form-item label="已制单：">
        <el-select v-model="account" placeholder="请选择">
          <el-option
            v-for="item in accounts"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item> -->
      <el-form-item label="申请单号：">
        <el-select v-model="appl" placeholder="请选择">
          <el-option
            v-for="item in appls"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item><el-button @click="query()">查询</el-button></el-form-item>
    </el-form>
    <el-form :inline="true">
      <el-form-item label="到账时间：">
        <el-date-picker
          v-model="value2"
          align="right"
          type="date"
          placeholder="选择日期"
          :picker-options="pickerOptions"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button @click="arrival">勾选到账</el-button>
        <el-button @click="arrivalAll">全部到账</el-button>
      </el-form-item>
      <el-form-item style="float: right">
        <el-radio-group v-model="radio" @change="radChange()">
          <el-radio-button :label="3">全部</el-radio-button>
          <el-radio-button :label="6">未到账</el-radio-button>
          <el-radio-button :label="9">已到账</el-radio-button>
        </el-radio-group></el-form-item
      >
    </el-form>

    <el-table
      :header-cell-style="{ 'text-align': 'center' }"
      :cell-style="{ 'text-align': 'center' }"
      :data="
        tableData.slice((currentPage - 1) * pagesize, currentPage * pagesize)
      "
      border
      height="calc(100vh - 355px)"
      :default-sort="{ prop: 'IdentityNum', order: 'ascending' }"
      v-show="showInfoList"
      style="margin-top: 10px"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" fixed="left" width="55">
      </el-table-column>
      <el-table-column fixed="left" label="操作" width="80">
        <template slot-scope="scope">
          <div v-if="scope.row.FinanceStatus == '未到账'">
            <el-button type="text" size="small" @click="modify(scope.row)"
              >到账</el-button
            >
          </div>
        </template>
      </el-table-column>
      <el-table-column type="index" label="序号" width="50" />
      <el-table-column prop="Name" label="姓名" width="100"> </el-table-column>
      <el-table-column prop="GenderCode" label="性别" width="100">
        <template slot-scope="scope">
          <div>
            {{ scope.row.GenderCode == 2 ? "女" : "男" }}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="IdentityNum" label="身份证号" sortable width="180">
      </el-table-column>
      <el-table-column
        prop="LandExpropriatedAge"
        label="年龄"
        sortable
        width="100"
      >
      </el-table-column>
      <el-table-column prop="AccountMoney" label="到账金额" width="150">
        <template slot-scope="scope">
          {{ number_format(scope.row.AccountMoney, 2) }}
        </template>
      </el-table-column>
      <el-table-column prop="OperName" label="录入人员" width="130">
      </el-table-column>
      <el-table-column prop="OperTime" label="录入时间" width="200">
        <template slot-scope="scope">{{
          formatDate(scope.row.OperTime)
        }}</template>
      </el-table-column>

      <el-table-column prop="ReviewName" label="审核人" width="130">
      </el-table-column>
      <el-table-column prop="ReviewTime" label="审核时间" width="200">
        <template slot-scope="scope">{{
          formatDate(scope.row.ReviewTime)
        }}</template>
      </el-table-column>
      <el-table-column prop="ApplyName" label="制单人员" width="130">
      </el-table-column>
      <el-table-column prop="ApplyTime" label="制单时间" width="200">
        <template slot-scope="scope">{{
          formatDate(scope.row.ApplyTime)
        }}</template>
      </el-table-column>
      <el-table-column
        prop="InterestMoney"
        label="计息金额"
        width="150"
        style="text-align: right"
      >
        <template slot-scope="scope">
          {{ number_format(scope.row.InterestMoney, 2) }}
        </template>
      </el-table-column>
      <el-table-column prop="FinanceStatus" label="到账状态" width="87">
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[10, 50, 100, 200]"
      :page-size="pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="this.tableData.length"
      v-show="showInfoList"
    >
    </el-pagination>
    <el-form :inline="true" v-show="showInfoList">
      <el-form-item label="补贴金额：">
        <el-input placeholder="" v-model="input" :disabled="true"></el-input>
      </el-form-item>
      <el-form-item label="计息金额：">
        <el-input
          placeholder=""
          v-model="jiximoney"
          :disabled="true"
          style="text-align: right; align: right"
        >
        </el-input>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { API_GET_LAND } from "../../api/table";
import {
  API_GET_LIST,
  API_GETV_ID,
  API_FINANCE,
  API_FIN_GET,
  API_FIN_GET_ACC,
} from "../../api/Voucherpreparation";
export default {
  name: "",
  data() {
    return {
      pagesize: 10, //每页的数据条数
      currentPage: 1,
      msg: "账户补贴到账（城居保）",
      showInfoList: true,
      radio: 3, // 多选框
      value: "", // 征地模块展示值
      options: [],
      account: "", // 已制单
      accounts: [
        {
          value: 2,
          label: "未到账",
        },
        {
          value: 3,
          label: "已到账",
        },
      ],
      appl: "", //申请单
      appls: [],
      input: "", // 总金额补贴
      jiximoney: "",
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            },
          },
          {
            text: "昨天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", date);
            },
          },
          {
            text: "一周前",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", date);
            },
          },
        ],
      },
      value2: "", // 时间选择器
      tableData: [], // 表单数据
      multipleSelection: [], // 选中数据合集
      // target: false, // 控制表单显示隐藏
      /* 分页 */
      currentPage4: 1,
    };
  },
  methods: {
    // 根据到账状态分类
    radChange() {
      if (this.radio == "3") {
        this.query();
      } else if (this.radio == "6") {
        this.notquery();
      } else {
        this.alreadyquery();
      }
    },
    // 筛选出已到账数据
    alreadyquery() {
      let data = {
        stype: 2,
        Applyid: this.appl,
        ApplyType: 0,
      };
      API_FIN_GET(data)
        .then((res) => {
          this.tableData = [];
          res.ResList.map((item) => {
            if (item.FinanceStatus == "已到账") {
              this.tableData.push(item);
            }
          });
          this.showInfoList = true;
          this.$message.success("数据筛选成功!");
          let a = 0,
            b = 0;
          this.tableData.map((item, index) => {
            a += Number(this.tableData[index].AccountMoney);
            b += Number(this.tableData[index].InterestMoney);
          });
          this.input = this.number_format(a, 2);
          this.jiximoney = this.number_format(b, 2);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 筛选出未到账数据
    notquery() {
      let data = {
        stype: 2,
        Applyid: this.appl,
        ApplyType: 0,
      };
      API_FIN_GET(data)
        .then((res) => {
          this.tableData = [];
          res.ResList.map((item) => {
            if (item.FinanceStatus == "未到账") {
              this.tableData.push(item);
            }
          });
          this.showInfoList = true;
          this.$message.success("数据筛选成功!");
          let a = 0,
            b = 0;
          this.tableData.map((item, index) => {
            a += Number(this.tableData[index].AccountMoney);
            b += Number(this.tableData[index].InterestMoney);
          });
          this.input = this.number_format(a, 2);
          this.jiximoney = this.number_format(b, 2);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 勾选到账
    arrival() {
      if (this.value2 != "") {
        let data = [];
        this.multipleSelection.map((item) => {
          if (item.FinanceStatus != "已到账") {
            data.push({
              Id: item.Id,
              Farmerid: item.Farmerid,
              FinanceDate: this.dayToString(this.value2),
            });
          }
        });
        console.log(data);
        if (data.length != 0) {
          API_FINANCE(data)
            .then((res) => {
              console.log(res);
              this.query();
              this.$message.success("到账成功！");
              // this.overChange();
              // this.finge();
            })
            .catch((err) => {
              console.log(err);
              this.query();
            });
        } else {
          this.$message.warning("未选择有效数据！");
        }
      } else {
        this.$message.warning("请选择到账时间！");
      }
    },
    // 全部到账
    arrivalAll() {
      if (this.value2 != "") {
        let data = {
          Applyid: this.appl,
          FinanceDate: this.dayToString(this.value2),
        };
        console.log(data);
        API_FIN_GET_ACC(data)
          .then((res) => {
            console.log(res);
            this.query();
            this.$message.success("到账成功！");
          })
          .catch((err) => {
            console.log(err);
          });
      } else {
        this.$message.warning("请选择到账时间！");
      }
    },
    // 多选
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    /* 获取征地项目列表 */
    submitProjectName() {
      API_GET_LAND()
        .then((res) => {
          this.options = res.ResList;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    query() {
      // this.target = true;
      let data = {
        stype: 2,
        Applyid: this.appl,
        ApplyType: 0,
        // Id: this.value,
        // Farmerid: row.Farmerid,
        // FinanceDate: this.value2,
      };
      API_FIN_GET(data)
        .then((res) => {
          console.log(res);
          this.tableData = res.ResList;
          this.$message.success("查询成功!");
          this.showInfoList = true;
          let a = 0,
            b = 0;
          this.tableData.map((item, index) => {
            a += Number(this.tableData[index].AccountMoney);
            b += Number(this.tableData[index].InterestMoney);
          });
          this.input = this.number_format(a, 2);
          this.jiximoney = this.number_format(b, 2);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    handleSizeChange(val) {
      this.pagesize = val;
    },
    handleCurrentChange(currentPage) {
      this.currentPage = currentPage;
    },
    // 获取到账单号
    onChange() {
      this.appl = "";
      let data = {
        landid: this.value,
        stype: 2,
        Atype: 0,
      };
      // this.appl = "";
      // if (this.account == 2) {
      //   data.Atype = 2;
      // } else {
      //   data.Atype = 3;
      // }
      // console.log(data);
      API_GET_LIST(data)
        .then((res) => {
          console.log(res);
          this.appls = [];
          // this.appls = res.ResList;
          res.ResList.map((item) => {
            this.appls.push({
              value: item.ApplyGroupid,
              label: item.ApplyGroupid,
            });
          });
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 获取单号对应的项目信息
    getInfoList() {
      let data = {
        id: this.value,
        stype: 2,
        ApplyType: this.account,
        Applyid: this.appl,
      };
      API_GETV_ID(data)
        .then((res) => {
          console.log(res);
          this.tableData = res.ResList;
          this.$message.success("查询成功！");
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 单独到账
    modify(row) {
      if (this.value2 != "") {
        let data = [
          {
            Id: row.Id,
            Farmerid: row.Farmerid,
            FinanceDate: this.dayToString(this.value2),
          },
        ];
        console.log(data);

        API_FINANCE(data)
          .then((res) => {
            console.log(res);
            this.$message.success("到账成功！");
            this.query();
            // this.overChange();
            // this.finge();
          })
          .catch((err) => {
            console.log(err);
          });
      } else {
        this.$message.warning("请选择到账时间！");
      }
    },
    myReplace(f, e) {
      //吧f替换成e
      var reg = new RegExp(f, "g"); //创建正则RegExp对象
      return this.replace(reg, e);
    },
    dayToString(date) {
      var y = date.getFullYear();
      var m = date.getMonth() + 1;
      m = m < 10 ? "0" + m : m;
      var d = date.getDate();
      d = d < 10 ? "0" + d : d;
      return y + "-" + m + "-" + d;
    },
    // 处理获取到的时间戳
    formatDate(time) {
      if (time != "") {
        let aaa = parseInt(time.toString().substr(6, 13));
        if (aaa > 0) {
          return new Date(aaa).toLocaleDateString();
        } else {
          return "--";
        }
      }
    },
    // 金额处理（加千分符，小数点取后两位）
    number_format(number, decimals, dec_point, thousands_sep) {
      /*
       * 参数说明：
       * number：要格式化的数字
       * decimals：保留几位小数
       * dec_point：小数点符号
       * thousands_sep：千分位符号
       *
       */
      number = (number + "").replace(/[^0-9+-Ee.]/g, "");
      var n = !isFinite(+number) ? 0 : +number,
        prec = !isFinite(+decimals) ? 0 : Math.abs(decimals),
        sep = typeof thousands_sep === "undefined" ? "," : thousands_sep,
        dec = typeof dec_point === "undefined" ? "." : dec_point,
        s = "",
        toFixedFix = function (n, prec) {
          var k = Math.pow(10, prec);
          return "" + parseInt(n * k) / k;
        };
      s = (prec ? toFixedFix(n, prec) : "" + parseInt(n)).split(".");
      var re = /(-?\d+)(\d{3})/;
      while (re.test(s[0])) {
        s[0] = s[0].replace(re, "$1" + sep + "$2");
      }
      if ((s[1] || "").length < prec) {
        s[1] = s[1] || "";
        s[1] += new Array(prec - s[1].length + 1).join("0");
      }
      return s.join(dec);
    },
  },
  created() {
    this.submitProjectName();
  },
};
</script>

<style scoped lang="scss">
.accountsubsidycity {
  padding: 30px;
  .el-form {
    min-width: 1459px;
  }
  .el-pagination {
    // max-width: 1266px;
    text-align: right;
    margin-top: 10px;
  }
  ::v-deep .el-input.is-disabled .el-input__inner {
    text-align: right;
  }
}
</style>
